<template>
  <el-container style="height: 100%;">
    <el-header>
      <h1>Neusoft&nbsp;&nbsp;东软体检报告管理系统</h1>
      <p>医生：xxx</p>
    </el-header>
    <el-container>
      <el-aside width="260px">
        <h4>体检用户查询</h4>
        <el-form ref="formRef" :model="selectForm" label-width="auto">
          <el-form-item label="手机号码">
            <el-input v-model="selectForm.userId" placeholder="手机号码" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="selectForm.realName" placeholder="姓名" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="selectForm.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="套餐类型">
            <el-select v-model="selectForm.smId" placeholder="套餐类型">
              <el-option label="男士-基础套餐" value="1" />
              <el-option label="女士-基础套餐" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="体检日期">
            <el-date-picker v-model="selectForm.orderData" type="date" placeholder="体检日期" style="width: 100%" />
          </el-form-item>
          <el-form-item label="是否归档">
            <el-radio-group v-model="selectForm.state">
              <el-radio border label="1">未归档</el-radio>
              <el-radio border label="0">已归档</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="warning">重置</el-button>
          </el-form-item>
        </el-form>
      </el-aside>
      <el-main>
        <el-table :data="ordersArr" style="width: 100%">
          <el-table-column prop="orderId" label="预约编号" width="120" />
          <el-table-column prop="userId" label="手机号码" width="140" />
          <el-table-column prop="realName" label="真实姓名" width="120" />
          <el-table-column prop="sex" label="性别" width="60" />
          <el-table-column prop="type" label="套餐类型" />
          <el-table-column prop="name" label="体检医院" width="220" />
          <el-table-column prop="orderDate" label="体检日期" />
          <el-table-column label="操作" width="120">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick">编辑体检报告</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next, total" :total="100" :page-size="10" style="margin-top: 20px;" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { setSessionStorage } from "../common.js";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8088/tijiancms";

export default {
  setup() {
    const router = useRouter();

    const state = reactive({
      selectForm: {
        userId: "",
        realName: "",
        sex: "",
        smId: "",
        orderData: "",
        state: "1"
      },
      ordersArr: [
        {
          orderId: '123554',
          userId: '1234567890',
          realName: '猪笑哥',
          sex: '女',
          type: '女士-基础套餐',
          name: '沈阳市XXX医院',
          orderData: '2022-03-03',
        },
        {
          orderId: '123554',
          userId: '1234567890',
          realName: '猪笑哥',
          sex: '女',
          type: '女士-基础套餐',
          name: '沈阳市XXX医院',
          orderData: '2022-03-03',
        },
        {
          orderId: '123554',
          userId: '1234567890',
          realName: '猪笑哥',
          sex: '女',
          type: '女士-基础套餐',
          name: '沈阳市XXX医院',
          orderData: '2022-03-03',
        },
        {
          orderId: '123554',
          userId: '1234567890',
          realName: '猪笑哥',
          sex: '女',
          type: '女士-基础套餐',
          name: '沈阳市XXX医院',
          orderData: '2022-03-03',
        },
      ]
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style scpoed>
.el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1C51A3;
}

.el-header h1 {
  font-size: 22px;
  font-weight: 700;
}

.el-header p {
  font-size: 16px;
}

.el-footer {
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  box-sizing: border-box;
  padding: 20px;
}

.el-aside h4 {
  color: #555;
  margin-bottom: 20px;
}

.el-main {
  background-color: #e9eef3;
}
</style>